<!--
 * @Description: 搜索栏组件
 * @Author: JiangMing
 * @Date: 2021-09-1 17:10:00
 * @LastEditors: Lxc
 * @LastEditTime: 2021-09-10 16:19:12
-->
<template>
  <view class="search-bar">
    <uni-search-bar
      placeholder="输入关键词搜索"
      bgColor="#FFF"
      radius="8"
      @confirm="search"
      @cancel="cancel"
      @input="input"
    >
      <uni-icons slot="searchIcon" color="#027AFF" size="18" type="search" />
    </uni-search-bar>
  </view>
</template>

<script>
export default {
  methods: {
    search(e) {
      this.$emit("search", e);
    },
    cancel(e) {
      this.$emit("cancel", e);
    },
    input(e) {
      this.$emit("input", e);
    }
  },
};
</script>

<style lang="scss" scoped>
.search-bar {
  background-color: #027aff;
  padding: 8rpx 0;
  ::v-deep .uni-searchbar__cancel {
    color: #fff;
  }
  ::v-deep .uni-searchbar__box {
    height: 80rpx;
  }
}
</style>